<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="element-ui/index.dark.css">
</head>
<body>

<div id="surface-form" style="padding-bottom: 40px;"></div>

<script src="./vue/2.6.12/vue.min.js"></script>
<script src="./axios/0.24.0/axios.min.js"></script>
<script src="./element-ui/2.15.7/index.min.js"></script>

<script src="form.js"></script>

<!--editor-->
<script src="./wangEditor/wangEditor.min.js"></script>

<script>

    ;(function () {

        let sf = {}

        // 全局混入
        Vue.mixin({
            methods: {
                hello() {
                    console.log("全局混入事件")
                    sf.change(this.prop, 'ok')
                }
            }
        })

        // 全局组件注册
        Vue.component('hello', {
            functional: true,
            props: {
                label: String,
                prop: String,
                data: Object,
                value: [String],
                model: Object
            },
            render(h, cxt) {
                return h("el-button", {
                    on: {
                        click() {
                            console.log('全局组件注册')
                        }
                    }
                }, cxt.props.value)
            }
        })

        // surfaceForm组件注册
        surfaceForm.component({
            name: 'world',
            events: {
                // 参数初始化时（组件未注册）调用
                onInit(c) {
                    console.log('surfaceForm自定义组件配置初始化')
                }
            },
            component: {
                name: 'world',
                props: {
                    label: String,
                    prop: String,
                    value: [String],
                    model: Object
                },
                render(h) {
                    console.log(this)
                    return h("el-button", {
                        on: {
                            click() {
                                console.log('surfaceForm组件注册')
                            }
                        }
                    }, this.value)
                }
            }
        })

        sf = surfaceForm.create(document.getElementById('surface-form'), {
            options: {
                submitBtn: {
                    props: {
                        prop: {
                            type: 'primary',
                            icon: 'el-icon-check'
                        },
                        confirmMsg: '',
                    }
                },
                async: {
                    "url": "/upload.php"
                }
            },
            columns: [
                {
                    "el": "hello",
                    "prop": "hello",
                    "label": "自定义组件",
                    "value": "自定义全局组件",
                    "item": {},
                },
                {
                    "el": "world",
                    "prop": "world",
                    "label": "自定义组件",
                    "value": "surface-form自定义组件",
                    "item": {},
                },
                {
                    "el": "input",
                    "prop": "username",
                    "label": "用户名",
                    "value": "用户名必须填，必须！必须！必须！",
                    "item": {
                        "children": [
                            {
                                "el": "div",
                                "class": "s-marker",
                                "domProps": {
                                    "innerHTML": "要不得"
                                }
                            }
                        ]
                    },
                    "validate": [
                        {
                            "required": true,
                            "message": "用户名必须"
                        }
                    ],
                    "children": [
                        {
                            "el": "span",
                            "item": false,
                            "domProps": {
                                "innerText": "元"
                            },
                            "slot": "append"
                        }
                    ]
                },
                {
                    "el": "el-button",
                    "prop": "btn-mixin",
                    "label": "绑定事件",
                    "value": "",
                    "props": {
                        "type": "primary"
                    },
                    on: {
                        click: 'hello'
                    },
                    domProps: {
                        innerHTML: "全局混入事件"
                    },
                    "item": {}
                },
                {
                    "el": "el-button",
                    "prop": "button",
                    "label": "绑定事件",
                    "value": "",
                    "props": {
                        "type": "primary"
                    },
                    on: {
                        // 自定义点击事件
                        click() {
                            // 修改值
                            console.log('自定义事件')
                            sf.change(this.prop, 'ok')
                        }
                    },
                    domProps: {
                        innerHTML: "自定义事件"
                    },
                    "item": {}
                },
                {
                    "el": "input",
                    "prop": "hidden",
                    "label": "",
                    "value": "看不见我",
                    "props": {
                        "type": "hidden"
                    },
                    "class": "hidden"
                },
                {
                    "el": "number",
                    "prop": "price",
                    "label": "价格",
                    "value": "",
                    "props": {
                        "step": 5
                    },
                    "item": {}
                },
                {
                    "el": "select",
                    "prop": "hobby",
                    "label": "爱好",
                    "value": "",
                    "options": [
                        {
                            label: '干饭',
                            value: 1
                        },
                        {
                            label: '打麻将',
                            value: 2
                        },
                        {
                            label: '睡觉',
                            value: 3
                        },
                        {
                            label: '爬山',
                            value: 4
                        }
                    ],
                    "props": {
                        "multiple": true
                    },
                    "item": {}
                },
                {
                    "el": "checkbox",
                    "prop": "label",
                    "label": "标签",
                    "value": [],
                    "options": [
                        {
                            label: '干饭',
                            value: 1
                        },
                        {
                            label: '打麻将',
                            value: 2
                        },
                        {
                            label: '睡觉',
                            value: 3
                        },
                        {
                            label: '爬山',
                            value: 4
                        }
                    ],
                    "props": {
                        "max": 2,
                        "group": true
                    },
                    "item": {
                        "children": [
                            {
                                "el": "div",
                                "class": "s-marker",
                                "domProps": {
                                    "innerHTML": "最多选择两项"
                                }
                            }
                        ]
                    }
                },
                {
                    "el": "radio",
                    "prop": "examine",
                    "label": "干啥呢",
                    "value": 2,
                    "options": [
                        {
                            label: '干饭',
                            value: 1
                        },
                        {
                            label: '打麻将',
                            value: 2
                        },
                        {
                            label: '睡觉',
                            value: 3
                        },
                        {
                            label: '爬山',
                            value: 4
                        }
                    ],
                    "props": {
                        "group": false
                    },
                    "item": {}
                },
                {
                    "el": "switch",
                    "prop": "postage",
                    "label": "包邮",
                    "value": 0,
                    "item": {}
                },
                {
                    "el": "date",
                    "prop": "section_day",
                    "label": "日期",
                    "value": [
                        "2021-03-04 00:00:00",
                        "2021-04-13 00:00:00"
                    ],
                    "props": {
                        "type": "datetimerange",
                        "value-format": "yyyy-MM-dd HH:mm:ss"
                    },
                    "item": {}
                },
                {
                    "el": "time",
                    "prop": "section_time",
                    "label": "时间",
                    "value": "",
                    "props": {
                        "isRange": true,
                        "value-format": "HH:mm:ss"
                    },
                    "item": {}
                },
                {
                    "el": "color",
                    "prop": "color",
                    "label": "颜色",
                    "value": "#333333",
                    "item": {}
                },
                {
                    "el": "rate",
                    "prop": "rate",
                    "label": "评分",
                    "value": 2,
                    "item": {}
                },
                {
                    "el": "slider",
                    "prop": "slider",
                    "label": "范围",
                    "value": [
                        15,
                        27
                    ],
                    "props": {
                        "min": 10,
                        "max": 30,
                        "range": true
                    },
                    "item": {}
                },
                {
                    "el": "cascader",
                    "prop": "cascader",
                    "label": "cascader",
                    "value": "",
                    "props": {
                        "debounce": 100,
                        "clearable": true,
                        "async": {
                            "url": "/cascaderData.php"
                        }
                    },
                    "item": {}
                },
                {
                    "el": "cascader",
                    "prop": "cascader1",
                    "label": "cascader1",
                    "value": [
                        "CQ",
                        "JB"
                    ],
                    "options": [
                        {
                            "value": "BJ",
                            "label": "北京",
                            "children": [
                                {
                                    "value": "TAM",
                                    "label": "天安门"
                                },
                                {
                                    "value": "TT",
                                    "label": "天坛"
                                }
                            ]
                        },
                        {
                            "value": "CQ",
                            "label": "重庆",
                            "children": [
                                {
                                    "value": "JB",
                                    "label": "江北区"
                                },
                                {
                                    "value": "NN",
                                    "label": "南岸区"
                                }
                            ]
                        }
                    ],
                    "item": {}
                },
                {
                    "el": "editor",
                    "prop": "content",
                    "label": "说明",
                    "value": "<h1>666</h1>",
                    "props": {
                        "uploadUrl": "upload.php",
                        "manageUrl": "images.php",
                        "typeName": "type",
                        "config": {
                            "showLinkImgAlt": false
                        }
                    },
                    "item": {}
                },
                {
                    "el": "upload",
                    "prop": "avatar",
                    "label": "头像",
                    "value": [
                        "http://q1.qlogo.cn/g?b=qq&nk=191587814&s=640"
                    ],
                    "props": {
                        "manageUrl": "images.php",
                        "action": "upload.php",
                        "limit": 5
                    },
                    "item": {}
                },
                {
                    "el": "take",
                    "prop": "user_id",
                    "label": "联合选择",
                    "value": [
                        1,
                        3
                    ],
                    "options": [
                        {
                            "value": 1,
                            "label": "大狗"
                        },
                        {
                            "value": 2,
                            "label": "<img src=\"http://q1.qlogo.cn/g?b=qq&nk=191587559&s=640\" class=\"take-img\"> 二狗"
                        },
                        {
                            "value": 3,
                            "label": "<img src=\"http://q1.qlogo.cn/g?b=qq&nk=191587114&s=640\" class=\"take-img\"> 三狗"
                        }
                    ],
                    "props": {
                        "url": "images.php?take=1",
                        "unique": true,
                        "limit": 9
                    },
                    "item": {}
                },
                {
                    "el": "array",
                    "prop": "arrays",
                    "label": "json",
                    "value": {},
                    "options": [
                        {
                            "el": "input",
                            "prop": "json_input",
                            "label": "用户名",
                            "value": "",
                            "item": {}
                        },
                        {
                            "el": "number",
                            "prop": "json_number",
                            "label": "年龄",
                            "value": "",
                            "item": {}
                        },
                        {
                            "el": "checkbox",
                            "prop": "json_checkbox",
                            "label": "爱好",
                            "value": [],
                            "options": {
                                "1": "干饭",
                                "2": "打麻将",
                                "3": "睡觉",
                                "4": "爬山"
                            },
                            "props": {
                                "max": 2
                            },
                            "item": {}
                        }
                    ],
                    "props": {
                        "span": 24,
                        "title": false,
                        "append": true
                    },
                    "item": {}
                },
                {
                    "el": "number",
                    "prop": "pricea",
                    "label": "我是惊喜",
                    "value": 2,
                    "item": {
                        "children": [
                            {
                                "el": "div",
                                "class": "s-marker",
                                "domProps": {
                                    "innerHTML": "惊不惊喜"
                                }
                            }
                        ]
                    },
                    "props": {
                        "step": 5
                    },
                    // 组件显示条件
                    "visible": [
                        {
                            "prop": "priceb",
                            "value": 10
                        },
                        {
                            "prop": "tree",
                            "exec": "val.indexOf(1) >= 0"
                        },
                    ]
                },
                {
                    "el": "number",
                    "prop": "priceb",
                    "label": "价格",
                    "value": 8,
                    "item": {
                        "children": [
                            {
                                "el": "div",
                                "class": "s-marker",
                                "domProps": {
                                    "innerHTML": "把我加到10有惊喜"
                                }
                            }
                        ]
                    },
                    // 组件显示条件
                    "visible": [
                        {
                            "prop": "tree",
                            "exec": "val.indexOf(1) >= 0"
                        }
                    ]
                },
                {
                    "el": "tree",
                    "prop": "tree",
                    "label": "树",
                    "value": "",
                    "item": {
                        "children": [
                            {
                                "el": "div",
                                "class": "s-marker",
                                "domProps": {
                                    "innerHTML": "选中我试一试"
                                }
                            }
                        ]
                    },
                    "props": {
                        "check-strictly": true,
                        "auto-expand-parent": false,
                        "showCheckbox": true,
                        "node-key": "id",
                        "data": [
                            {
                                "id": 1,
                                "label": "大锅",
                                "expand": true,
                                "selected": false,
                                "children": [
                                    {
                                        "id": 101,
                                        "label": "二锅",
                                        "expand": true,
                                        "children": [
                                            {
                                                "id": 10101,
                                                "label": "小明"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                },
                {
                    "el": "el-tabs",
                    "prop": "",
                    "label": "tabs",
                    "value": "",
                    "children": [
                        {
                            "el": "el-tab-pane",
                            "props": {
                                "label": "tab1"
                            },
                            "item": false,
                            "children": [
                                {
                                    "el": "input",
                                    "prop": "tab1-name",
                                    "label": "姓名1",
                                    "value": "",
                                    "item": {}
                                },
                                {
                                    "el": "input",
                                    "prop": "tab1-age",
                                    "label": "年龄1",
                                    "value": "",
                                    "item": {}
                                }
                            ]
                        },
                        {
                            "el": "el-tab-pane",
                            "props": {
                                "label": "tab2"
                            },
                            "item": false,
                            "children": [
                                {
                                    "el": "input",
                                    "prop": "tab2-name",
                                    "label": "姓名2",
                                    "value": "",
                                    "item": {}
                                },
                                {
                                    "el": "input",
                                    "prop": "tab2-age",
                                    "label": "年龄2",
                                    "value": "",
                                    "item": {}
                                }
                            ]
                        }
                    ],
                    "item": {}
                }
            ],
        })
    }())

</script>


</body>
</html>
